<!-- 公共头部 -->
<app-header [headerTitle]="headerTitle"></app-header>

<section class="content-con">
  <!-- 下拉选择框 -->
  <nav class="nav-con">
    <div class="nav-item">
      <select [ngModel]="currentMonth?.monthId" (change)="getMonth($event.target.value)">
        <option *ngFor="let month of monthList" [value]="month.monthId">{{month.name}}</option>
      </select>
    </div>
    <div class="nav-item">
      <select [ngModel]="currentAccount?.accountId" (change)="getAccount($event.target.value)">
        <option *ngFor="let account of accountList" [value]="account.accountId">{{account.name}}</option>
      </select>
    </div>
  </nav>
  <!-- 账单主要内容 -->
  <main>
    <div class="flex message-top">
      <p class="month"><span>{{currentValue?.month}}</span>/{{currentValue?.year}}</p>
      <p class="balance">余额：¥{{currentValue?.balance}}</p>
    </div>
    <div class="flex message-center">
      <div class="pay">
        <p>支出</p>
        <p class="pay-num">¥{{currentValue?.pay}}</p>
      </div>
      <div class="income">
        <p>收入</p>
        <p class="income-num">¥{{currentValue?.income}}</p>
      </div>
    </div>
    <div class="flex message-bottom">
      <p class="buget">预算</p>
      <p class="notset">您还未设置</p>
    </div>
  </main>

  <!-- 账单跳转TAB -->
  <nav class="tab-list">
    <ul>
      <li class="tab-list-item">收支分析</li>
      <li class="tab-list-item">收支分析</li>
      <li class="tab-list-item">收支分析</li>
      <li class="tab-list-item">收支分析</li>
    </ul>
  </nav>
</section>

<!-- 账单列表 -->
<section>
  <div class="pay-item-list" *ngFor="let payList of currentValue.monthPayList">
    <p class="date">{{payList.dateName}}</p>
    <ul>
      <li class="pay-item" *ngFor="let payItem of payList.datePayList">
        <div class="pay-item-left">
          <p class="pay-item-msg">{{payItem.message}}</p>
          <p class="pay-item-detail">
            <span>{{payItem.typeName}}</span><span>{{payItem.cardName}}</span><span>{{payItem.time}}</span></p>
        </div>
        <div class="pay-item-right flex">
          <p class="unaccount" *ngIf="payItem.accountState">未入账</p>
          <p class="money">-¥{{payItem.money}}</p>
        </div>
      </li>
    </ul>
  </div>
</section>
